<template>
	<div class="header-fixed-top">
		<transition-group v-if='!videoList ? false : true' enter-active-class='animated fadeIn'>
			<router-link 
						tag='div' 
						v-for='item of videoList' 
						:key='item._id'  
						class="video-list" 
						:class="{ video_list_active: VideoAct == item._id }"
						@touchstart.native='videoTouchstart(item._id)'
						@touchend.native='videoTouchend()'
						:to="'/VideoDetail/' + item._id" 
			>
				<div class="list-top">
					<img class="top-img" :src="item.v_img" />
					<div class="top-title">
						<p class="tit-p">
							{{item.v_title}}
						</p>
					</div>
					<div class="top-bottom">
						<div class="top-b-l">
							<div class="play-comm">
								{{item.v_comm}}
							</div>
						</div>
						<div class="top-b-r">
							<div class="play-time">
								{{item.v_time}}
							</div>
						</div>
					</div>
					<div class="play-icon">
						<span class="iconfont play-icon-ico">
							&#xe655;
						</span>
					</div>
				</div>
				<div class="list-bottom" :class='{ video_list_active: VideoAct == item.id }'>
					<div class="l-b-l">
						<span class="iconfont list-ico">
							&#xe600;
						</span>
						<span>
							{{item.v_user}}
						</span>
						<span class="list-tag">
							{{item.v_tag}}
						</span>
					</div>
					<div class="l-b-r">
						<span class="iconfont list-more">
							&#xe748;
						</span>
						<span class="list-more list-com">
							{{item.list_comments.length}}
						</span>
						<span class="iconfont list-more list-pl">
							&#xe636;
						</span>
					</div>
				</div>
			</router-link>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name: 'video-list',
		props: {
			videoList: Array
		},
		data () {
			return {
				VideoAct: ''
			}
		},
		methods: {
			videoTouchstart (xb) {
				this.VideoAct = xb
			},
			videoTouchend () {
				this.VideoAct = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.video-list
		border:none
		.list-top
			height:0
			overflow:hidden
			padding-bottom:56.451%
			position:relative
			background:#000
			.top-img
				width:100%
			.top-title
				width:94.8%
				padding:12px 20px
				background-image:linear-gradient(bottom,rgba(0,0,0,0),rgba(0,0,0,0.8))
				position:absolute
				top:0
				left:0
				.tit-p
					margin-top:10px
					line-height:44px
					color:#fff
					font-size:34px
					display: -webkit-box
					-webkit-line-clamp: 2
					overflow:hidden
					text-overflow:ellipsis
					-webkit-box-orient: vertical
			.top-bottom
				width:100%
				height:60px
				position:absolute
				bottom:0
				left:0
				display:flex
				flex-direction:row
				font-size:24px
				.top-b-l
					width:50%
					height:60px
					.play-comm
						display:inline-block
						border-radius:50px
						color:#fff
						padding:10px 16px
						background: rgba(0, 0, 0, 0.5)
						margin-left:22px
				.top-b-r
					width:50%
					height:60px
					.play-time
						display:inline-block
						border-radius:50px
						color:#fff
						padding:10px 16px
						background: rgba(0, 0, 0, 0.5)
						float:right
						margin-right:22px
			.play-icon
				width:110px
				height:110px
				background:red
				position:absolute
				top:50%
				left:50%
				margin-top:-55px
				margin-left:-55px
				display:flex
				justify-content:center
				align-items:center
				border-radius:50%
				background:rgba(0,0,0,.9)
				cursor:pointer
				.play-icon-ico
					font-size:50px
					color:#fff
		.list-bottom
			height:90px
			line-height:88px
			color:$public_thems_color
			display:flex
			flex-direction:row
			overflow:hidden
			.l-b-l
				width:50%
				height:90px
				.list-ico
					font-size:30px
					margin-left:26px
					margin-right:4px
				.list-tag
					display:inline
					padding:8px 18px
					background-color:rgb(240, 240, 240)
					color: rgb(155, 158, 163)
					margin-left:30px
			.l-b-r
				width:50%
				height:90px
				.list-more
					line-height:96px
					color:#202020
					font-size:38px
					float:right
					margin-right:28px
				.list-com
					font-size:26px
					margin-right:36px
				.list-pl
					font-size:34px
					margin-right:12px
	.video_list_active
		background:#e8e8e8
</style>
